<template>
  <div class="demo">
    <div class="demo-title">自定义面板</div>
    <div class="demo-content">
      <Collapse v-model:activeKey="activeKey" :bordered="false">
        <template #expandIcon="{ isActive }">
          <CaretRightOutlined :rotate="isActive ? 90 : 0" />
        </template>
        <Collapse.Panel key="1" header="This is panel header 1" :style="customStyle">
          <p>{{ text }}</p>
        </Collapse.Panel>
        <Collapse.Panel key="2" header="This is panel header 2" :style="customStyle">
          <p>{{ text }}</p>
        </Collapse.Panel>
        <Collapse.Panel key="3" header="This is panel header 3" :style="customStyle">
          <p>{{ text }}</p>
        </Collapse.Panel>
      </Collapse>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { CaretRightOutlined } from '@ant-design/icons-vue';
  import Collapse from '@sscd/collapse';
  const activeKey = ref(['1']);
  const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
  const customStyle =
    'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden';
</script>
